<template>
  <div>

    <el-form-item>
      <el-button type="primary" @click="addDomainVarietySetting">添加</el-button>
    </el-form-item>

    <el-form-item
      v-for="(domain, index) in formVarietySetting.domains"
      :key="domain.key"
      :prop="'varietySetting.' + index + '.value'"
    >
      <el-row :gutter="12" class="fill-width flex-fill">
        <el-col :span="12" class="fill-width flex-fill">
          <el-input placeholder="名称" class="fill-width flex-fill" v-model="domain.label"></el-input>
        </el-col>
        <el-col :span="12" class="fill-width flex-fill">
          <el-input placeholder="编码" class="fill-width flex-fill" v-model="domain.value">
            <template #append>
              <el-button type="danger" @click.prevent="removeDomainVarietySetting(domain)">删除</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </el-form-item>

  </div>
</template>

<script setup lang="ts">
import { SettingType } from "~/api/system/company/types";
import { onMounted, reactive, watch } from "vue";

interface Props {
  form: SettingType;
}

const { form} = withDefaults(defineProps<Props>(), {});

let formVarietySetting = reactive<{
  domains: any
}>({
  domains: [
    {
      label: "2",
      value: "2",
    },
  ],
});

const removeDomainVarietySetting = (item: any) => {
  const index = formVarietySetting.domains.indexOf(item);
  if (index !== -1) {
    formVarietySetting.domains.splice(index, 1);
  }
};

const addDomainVarietySetting = () => {

  if(!formVarietySetting.domains){
    formVarietySetting.domains = []
  }
  formVarietySetting.domains.push({
    key: Date.now(),
    value: "",
  });
};

onMounted(()=>{
  formVarietySetting.domains = form.varietySetting
})
watch(formVarietySetting,value => {
  form.varietySetting = value.domains
})
</script>

<style scoped lang="scss">

</style>
